<template>
	<view class="content">
		<view class="head-swiper">
			<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="item in itemList" :key="item">
					<image :src="item" mode=""></image>
				</swiper-item>
			</swiper>
			<view class="head-search" :style="'top:'+searchTop+'px'">
				<input type="text" value="" placeholder="请输入关键字搜索" />
			</view>
		</view>
		<view class="head-menu">
			<view class="head-menu-item">
				<image src="../../static/res-temp/images/u63.png" mode="aspectFit"></image>
				<view class="head-menu-item-text">全部商品</view>
			</view>
			<view class="head-menu-item">
				<image src="../../static/res-temp/images/u65.png" mode="aspectFit"></image>
				<view class="head-menu-item-text">联系客服</view>
			</view>
			<view class="head-menu-item">
				<image src="../../static/res-temp/images/u61.png" mode="aspectFit"></image>
				<view class="head-menu-item-text">我的订单</view>
			</view>
			<view class="head-menu-item">
				<image src="../../static/res-temp/images/u59.png" mode="aspectFit"></image>
				<view class="head-menu-item-text">个人中心</view>
			</view>
		</view>
		<view class="index-body-module">
			<view class="index-body-module-title">精品推荐</view>
			<view class="index-body-module-content">
				<view class="commodity-row-3">
					<image src="../../static/res-temp/images/u97.jpg" mode=""></image>
					<view class="commodity-item-title">培训教育系统</view>
					<view class="commodity-item-price">
						<text class="preferential-price">¥3000</text>
						<text class="original-price">¥6000</text>
					</view>
				</view>
				<view class="commodity-row-3">
					<image src="../../static/res-temp/images/u97.jpg" mode=""></image>
					<view class="commodity-item-title">培训教育系统</view>
					<view class="commodity-item-price">
						<text class="preferential-price">¥3000</text>
						<text class="original-price">¥6000</text>
					</view>
				</view>
				<view class="commodity-row-3">
					<image src="../../static/res-temp/images/u97.jpg" mode=""></image>
					<view class="commodity-item-title">培训教育系统</view>
					<view class="commodity-item-price">
						<text class="preferential-price">¥3000</text>
						<text class="original-price">¥6000</text>
					</view>
				</view>
			</view>
		</view>
		<view class="index-body-module">
			<view class="index-body-module-title">新品上市</view>
			<view class="index-body-module-content">
				<view class="commodity-row-3">
					<image src="../../static/res-temp/images/u97.jpg" mode=""></image>
					<view class="commodity-item-title">培训教育系统</view>
					<view class="commodity-item-price">
						<text class="preferential-price">¥3000</text>
						<text class="original-price">¥6000</text>
					</view>
				</view>
				<view class="commodity-row-3">
					<image src="../../static/res-temp/images/u97.jpg" mode=""></image>
					<view class="commodity-item-title">培训教育系统</view>
					<view class="commodity-item-price">
						<text class="preferential-price">¥3000</text>
						<text class="original-price">¥6000</text>
					</view>
				</view>
				<view class="commodity-row-3">
					<image src="../../static/res-temp/images/u97.jpg" mode=""></image>
					<view class="commodity-item-title">培训教育系统</view>
					<view class="commodity-item-price">
						<text class="preferential-price">¥3000</text>
						<text class="original-price">¥6000</text>
					</view>
				</view>
			</view>
		</view>
		<view class="index-body-module">
			<view class="index-body-module-title">热销商品</view>
			<view class="index-body-module-content">
				<view class="commodity-row-3">
					<image src="../../static/res-temp/images/u97.jpg" mode=""></image>
					<view class="commodity-item-title">培训教育系统</view>
					<view class="commodity-item-price">
						<text class="preferential-price">¥3000</text>
						<text class="original-price">¥6000</text>
					</view>
				</view>
				<view class="commodity-row-3">
					<image src="../../static/res-temp/images/u97.jpg" mode=""></image>
					<view class="commodity-item-title">培训教育系统</view>
					<view class="commodity-item-price">
						<text class="preferential-price">¥3000</text>
						<text class="original-price">¥6000</text>
					</view>
				</view>
				<view class="commodity-row-3">
					<image src="../../static/res-temp/images/u97.jpg" mode=""></image>
					<view class="commodity-item-title">培训教育系统</view>
					<view class="commodity-item-price">
						<text class="preferential-price">¥3000</text>
						<text class="original-price">¥6000</text>
					</view>
				</view>
			</view>
		</view>
		<view class="foot-copyright">
			<view class="foot-copyright-line"></view>
			<view class="foot-copyright-action">
				<text>登陆</text>
				<text class="foot-copyright-action-divide">|</text>
				<text>注册</text>
				<text class="foot-copyright-action-divide">|</text>
				<text>客服</text>
				<text class="foot-copyright-action-divide">|</text>
				<text>回顶部</text>
			</view>
			<view class="foot-copyright-text">© 2005-2018 网赢集团 版权所有，并保留所有权利</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemList: [
					'../../static/res-temp/images/u25.jpg',
					'../../static/res-temp/images/u27.png',
					'../../static/res-temp/images/u29.png',
				],
				indicatorDots: true,
				autoplay: false,
				interval: 5000,
				duration: 1000,
				statusBarHeight: 0,
				searchTop: uni.upx2px(20)
			}
		},
		onLoad() {
			const that = this;
			//#ifdef APP-PLUS
			const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			that.statusBarHeight = statusBarHeight;
			that.searchTop = statusBarHeight + uni.upx2px(20);
			//#endif
		},
		methods: {

		}
	}
</script>

<style>
	.head-swiper,
	.head-swiper swiper,
	.head-swiper swiper image {
		height: calc(750upx * 0.36666);
		/* height: calc(36.66666vw); */
		width: 750upx;

	}

	.head-search {
		height: 60upx;
		left: 40upx;
		right: 40upx;
		top: 20upx;
		background: rgba(255, 255, 255, .8);
		line-height: 60upx;
		position: absolute;
	}

	.head-search input {
		padding: 0 20upx;
		text-align: center;
		font-size: 28upx;
		line-height: 60upx;
		min-height: 60upx;
		height: 60upx;
	}

	.head-menu {
		height: 210upx;
		position: relative;
		background: #fff;
	}

	.head-menu-item {
		margin-top: 10upx;
		float: left;
		width: 25%;
		padding: 20upx;
		box-sizing: border-box;
		position: relative
	}

	.head-menu-item image {
		width: 107.5upx;
		display: block;
		height: 107.5upx;
		padding: 0 10upx;
		margin: auto;

	}

	.head-menu-item-text {
		height: 60upx;
		font-size: 28upx;
		text-align: center;
		line-height: 60upx;
	}

	.index-body-module {
		padding: 10upx 20upx 20upx 20upx;
		margin-top: 20upx;
		background: #fff;
		position: relative;
	}

	.index-body-module-title {
		height: 60upx;
		line-height: 60upx;
		padding: 10upx 0 10upx 20upx;
		position: relative;
		box-sizing: border-box;
		font-size: 28upx;
		line-height: 40upx;

	}

	.index-body-module-title:before {
		content: '';
		display: block;
		position: absolute;
		top: 10upx;
		bottom: 10upx;
		left: 0;
		width: 8upx;
		background: #f00;
	}

	.commodity-row-3 {
		width: calc((100% - 2 * 20upx) / 3);
		float: left;
		margin-right: 20upx;
	}

	.commodity-row-3:nth-child(n+3) {
		margin-right: 0;
	}

	.commodity-row-3 image {
		width: 223.3333upx;
		height: 223.3333upx;
		display: block;
	}

	.commodity-item-title {
		height: 64upx;
		line-height: 64upx;
		font-size: 26upx;
		color: #666;
	}

	.commodity-item-price {
		height: 30upx;
		line-height: 30upx;
		font-size: 32upx;
		color: #f00;
	}

	.original-price {
		font-size: 24upx;
		padding-left: 6upx;
		color: #aaa;
		text-decoration: line-through;
	}

	.index-body-module-content:before,
	.index-body-module-content:after {
		content: '';
		clear: both;
		display: block;

	}

	.foot-copyright {
		margin-top: 20upx;
		background: #fff;

	}

	.foot-copyright-line {
		height: 20upx;
		position: relative
	}

	.foot-copyright-line:after {
		display: block;
		content: '';
		position: absolute;
		height: 2upx;
		left: 0;
		right: 0;
		bottom: 0;
		transform: scaleY(.5);
		background: #ddd;
	}

	.foot-copyright-action {
		height: 50px;
		line-height: 50px;
		font-size: 26upx;
		text-align: center;
		color: #868686;

	}

	.foot-copyright-action-divide {
		padding: 0 10upx;
		font-size: 20upx;
	}

	.foot-copyright-text {
		text-align: center;
		font-size: 20upx;
		padding-bottom: 22upx;
		color: #888;
	}
</style>
